<template>
  <div>
    <div class="search_box">
      <el-select v-model="pag.type" placeholder="申请类别">
        <el-option value="1" label="加班"></el-option>
        <el-option value="2" label="奖金"></el-option>
      </el-select>
      <!-- <el-select v-model="pag.employees_id" filterable placeholder="申请人">
        <el-option
          v-for="item in employeesList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        ></el-option
      ></el-select> -->
      <el-date-picker
        v-model="pag.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
    <div class="export_box">
      <el-button type="primary" @click="exportData">导出数据</el-button>
      <!-- <el-button type="primary" @click="visible = true">申请</el-button> -->
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="h"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="create_time" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="employees" label="申请人" align="center">
      </el-table-column>
      <el-table-column prop="type" label="申请项" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.type == 1 ? "加班" : "奖金" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="overtime_price" label="加班单价" align="center">
      </el-table-column>
      <el-table-column prop="overtime_time" label="加班时长" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="总金额" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="editData(scope.row)">编辑</el-button>
          <el-button type="text" @click="delData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_table">
      <span style="line-height: 35px; margin-right: 30px"
        >总计:
        <span style="color: red">{{ Number(totalOa).toFixed(4) }}</span>
      </span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.total"
      >
      </el-pagination>
    </div>
    <!-- 录入 -->
    <el-dialog
      :title="emp + ' - 加班/奖金录入'"
      :visible.sync="visible"
      width="720px"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        label-width="130px"
        ref="oaform"
        :rules="rules"
      >
        <el-form-item label="申请类别" prop="type">
          <el-radio-group v-model="form.type" ref="radios" @change="changeType">
            <el-radio label="1">加班</el-radio>
            <el-radio label="2">奖金</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="员工" prop="employees_id">
          <el-select v-model="form.employees_id" @change="changeEmployees">
            <el-option
              v-for="item in employeesList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="日期" prop="create_time">
          <el-date-picker
            v-model="form.create_time"
            type="date"
            value-format="yyyy/MM/dd"
            placeholder="请选择"
          >
          </el-date-picker>
        </el-form-item>
        <br />
        <el-form-item
          label="加班时长"
          prop="overtime_time"
          v-if="form.type == 1"
        >
          <el-input
            v-model="form.overtime_time"
            type="number"
            @input="changOvertime"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="加班单价"
          prop="overtime_price"
          v-if="form.type == 1"
        >
          <el-input
            v-model="form.overtime_price"
            type="number"
            @input="changOvertime"
          ></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="form.amount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitLeave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";

export default {
  props: {
    emp: {
      type: String,
      default: "",
    },
    empid: {
      type: String,
      default: "",
    },
    toshow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: this.toshow,
      form: {
        type: "1",
        time: "",
        overtime_time: "",
        overtime_price: "",
        amount: "",
        remark: "",
      },
      rules: {
        type: [{ required: true, message: "请选择类别", trigger: "blur" }],
        employees_id: [
          { required: true, message: "请选择员工", trigger: "blur" },
        ],
        create_time: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        overtime_time: [
          { required: true, message: "请输入加班时长", trigger: "blur" },
        ],
        overtime_price: [
          { required: true, message: "请输入加班单价", trigger: "blur" },
        ],
        amount: [{ required: true, message: "请输入总金额", trigger: "blur" }],
      },
      tableData: [],
      employeesList: [],
      pag: {
        employees_id: this.empid,
        type: "",
        time: [],
        total: 0,
        page: 1,
        size: 10,
      },
      edit: false,
      h: "",
      totalOa: 0,
      totalList: [],
    };
  },
  created() {
    this.h = document.documentElement.offsetHeight - 320;
    openDB("car", "list").then((res) => {
      this.getList();
      this.getOthers();
    });
  },
  methods: {
    exportData() {
      let arr = [...this.totalList];
      arr.map((item) => {
        item.type_name = item.type == 1 ? "加班" : "奖金";
      });
      let header = [
        { value: "employees", label: "申请人", first: 1 },
        { value: "create_time", label: "出勤日期" },
        { value: "type_name", label: "申请项" },
        { value: "overtime_price", label: "加班单价", type: "n" },
        { value: "overtime_time", label: "加班时长", type: "n" },
        { value: "overtime_price", label: "加班费", type: "n" },
        { value: "amount", label: "总金额", type: "n", total: 1 },
        { value: "remark", label: "备注" },
      ];
      let msg = {
        msg1: "加班/奖金表",
      };
      printData(msg, arr, header);
    },
    resetSearch() {
      this.pag = {
        employees_id: this.empid,
        type: "",
        time: [],
        total: 0,
        page: 1,
        size: 10,
      };
      this.getList();
    },
    getList() {
      getDataByKey("list", "OA表")
        .then((res) => {
          let result = { ...this.pag };
          result.employees_id = Number(result.employees_id || 0);
          let { total, list, totalList } = searchTable(res?.data, result, 1);
          let totalAmount = 0;
          console.log(list);
          totalList.map((item) => {
            totalAmount = totalAmount + Number(item.amount || 0);
          });
          this.totalList = totalList;
          this.totalOa = totalAmount;
          this.tableData = list;
          this.pag.total = total;
        })
        .catch((err) => {
          this.$message({
            type: "warning",
            message: err,
          });
        });
    },
    getOthers() {
      getDataByKey("list", "员工表").then((res) => {
        this.employeesList = res.data;
      });
    },
    changeEmployees(val) {
      let arr = this.employeesList.filter((v) => {
        return v.id === val;
      })[0];
      this.form.employees = arr.name;
      this.form.employees_id = arr.id;
    },
    changeType() {
      this.form.overtime_time = "";
      this.form.overtime_price = "";
      this.form.amount = "";
      this.form.remark = "";
    },
    changOvertime() {
      if (this.form.type == 1) {
        this.form.amount =
          Number(this.form.overtime_time || 0) *
          Number(this.form.overtime_price || 0);
      }
    },
    submitLeave() {
      this.$refs["oaform"].validate((valid) => {
        if (valid) {
          let data = { ...this.form };
          data.start_time = data.create_time;
          data.end_time = data.create_time;
          data.employees = this.emp;
          data.employees_id = this.empid;
          if (this.edit) {
            editDB("list", "OA表", data).then(() => {
              this.$message.success("修改成功");
              this.getList();
              this.handleClose();
            });
          } else {
            data.id = new Date().getTime();
            changeDB("list", "OA表", data).then(() => {
              this.$message.success("添加成功");
              this.getList();
              this.handleClose();
            });
          }
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.visible = false;
      this.edit = false;
      this.form = {
        type: "1",
        time: "",
        overtime_time: "",
        overtime_price: "",
        amount: "",
        remark: "",
      };
    },

    editData(row) {
      this.edit = true;
      this.form = { ...row };
      this.visible = true;
    },
    delData(row) {
      this.$confirm("确定删除该条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDB("list", "OA表", row.id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
            this.visible = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pag.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pag.page = val;
      this.getList();
    },
    tableRowClassName(row) {
      if (row.row.type == 2) {
        return "warning-row";
      } else if (row.type == 1) {
        return "";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 200px;
  }
  .el-textarea {
    width: 540px;
  }
  .el-date-editor--datetimerange {
    width: 540px;
  }
}
</style>
<style>
.el-table .warning-row {
  background: #fdf6ec;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
